<template>
  <div class="c-minh c-bg-sgray c-fs22" v-if="detail">
    <div v-if="fromType == 1">
      <div class="c-ph24 c-pv24 c-bg-white c-mb20">
        <div class="c-br12 bg-lyellow">
          <div class="c-ph24 c-pt28 c-pb32">
            <div class="c-fc-myellow c-pb16 c-flex-row c-aligni-center"><span class="iconfont c-fs28 c-pr8">&#xe710;</span>{{companyAuth.companyName}}</div>
            <div class="ticketDetail c-w100 c-ph32 c-pt20 c-pb24">
              <div>{{detail.name}}</div>
              <div class="c-pt12 c-fs36 c-fw-b">{{parseFloat(detail.price)}}元代金券</div>
              <div class="c-pt52 c-fc-gray">{{detail.validStatus == 1 ? "领券当日起" + detail.validPeriod + '天内可用' : (detail.validStatus == 2 ? "领券第二日起" + detail.validPeriod + '天内可用' : (detail.startAt.split(" ")[0].replace(/-/g, '.') + "-" + detail.endAt.split(" ")[0].replace(/-/g, '.')+ "内使用"))}}</div>
            </div>
          </div>
        </div>
        <div class="c-pt20 c-fs26 theme-fc c-pb22 c-fw-b">{{'￥' | iosPriceFilter}}<span class="c-fs40 c-lh">{{detail.salePrice}}</span> <span class="c-text-decoration-through c-fs24 c-fc-gray c-fw-n">{{'￥' | iosPriceFilter}}<span class="c-lh">{{detail.price}}</span></span></div>
        <div class="c-pt24 c-flex-row c-justify-sb c-aligni-center c-bd-t1-f6 c-fs20 c-fc-sblack">
          <div class="c-fc-sblack c-flex-row c-aligni-center"><span class="iconfont c-fs24 c-pr10 c-fc-gray">&#xe6f2;</span>每人限购{{detail.limit}}张 <span class="c-pl28 c-pr10" v-if="detail.salePrice >0"><span class="iconfont c-fs24 c-fc-gray c-pr10">&#xe6f2;</span>随时可退</span></div>
          <div>已售{{detail.num - detail.leftNum}}件</div>
        </div>
      </div>
    </div>

    <div class="c-ph16 c-fc-xblack" v-if="fromType == 2">
      <div class="c-pt20 c-mb20">
        <div class="c-bg-white ticketInfo c-w100 hh514 c-ph32 c-pt32 c-pb24">
          <div class="c-textAlign-c">
            <div class="c-fw-b c-fs32">领取成功</div>
            <div class="c-ww200 c-hh200 c-inlineblack c-mt20">
              <img :src="$addXossFilter(detail.rcdQrcode, '')" class="c-w100 c-h c-inlineblack"/>
            </div>
            <div class="c-fc-gray c-pt10">到店消费时可出示上方二维码进行核销</div>
          </div>
          <div class="c-pt80">
            <div class="c-fw-b">券码信息</div>
            <div class="c-flex-row c-justify-sb c-aligni-center c-pt10">
              <div class="c-fs24" :class="detail.rcdStatus == 1 || detail.rcdStatus == 3 ? '' : 'c-fc-gray c-text-decoration-through'">{{detail.eRcdId}}</div>
              <div :class="detail.rcdStatus == 1 ? '' : 'c-fc-gray'">{{coupunStatus[detail.rcdStatus]}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="c-bg-white c-ph24 c-pv28 c-mb20" v-if="fromType == 1 && (detail.intrVideoUrl != '' || detail.intrVideoM3u8 != '')">
      <div class="c-fw-b c-fs28">商家简介</div>
      <div class="c-w100 c-hh260 c-pt24" v-if="detail.intrVideoUrl != '' || detail.intrVideoM3u8 != ''">
        <div class="c-p c-w100 c-hh240" v-if="!isVideoPlay" @click="initTcPlayer(detail.intrVideoUrl, detail.intrVideoM3u8)">
          <img class="c-pa c-w100 c-h c-p-t0 c-p-t0 c-br16" :src="$addXossFilter(detail.intrVideoCoverUrl)" />
          <div class="c-pa c-w100 c-h c-p-t0 c-p-t0 c-br16" style="background: rgba(0, 0, 0, 0.3)"></div>
          <i class="c-fc-white c-pa c-p-tp50 c-p-tl50 c-fs48 c-translate-xy-50 iconfont icon-bofang1"></i>
        </div>
        <div v-else id="myVideo" class="c-fs24 c-w100"></div>
      </div>
    </div>
    <div class="c-ph24 c-pb16 c-pt32 c-bg-white c-mb20">
      <div class="c-flex-row c-justify-sb c-aligni-center">
        <div class="c-flex-row c-aligni-center c-w90" @click="getShowDesc">
          <img class="c-ww80 c-hh80 c-br8 imgCloseBig" :src="$addXossFilter(shareLogo, '')" alt="">
          <div class="c-pl16">
            <div class="c-fw-b c-fs24">{{companyAuth.companyName}}</div>
            <div class="c-pt10 c-fc-gray" v-if="contactInfo.phone">{{contactInfo.phone}}</div>
          </div>
        </div>
        <a class="iconfont c-fs42 theme-fc c-bd-l1 c-pl8" :href="'tel:' + contactInfo.phone" v-if="contactInfo.phone">&#xe713;</a>
      </div>
      <div class="c-bd-t1-f6 c-mt24 c-pt20 c-flex-row c-justify-sb c-aligni-center" @click="getShowDesc" v-if="contactInfo && contactInfo.address">
        <div class="c-flex-row c-justify-sb c-aligni-center"><span class="iconfont c-fc-sgray">&#xe90f;</span><span class="c-pl8 c-fs22 c-ws-n">距离{{(contactInfo.distance/1000).toFixed(1)}}km</span><span class="c-mh10">•</span><span class="c-ws-n">{{contactInfo.address.length > 15 ? `${contactInfo.address.substr(0, 15)}...` : contactInfo.address}}</span></div>
        <span class="iconfont c-fs18 c-fc-sgray">&#xe908;</span>
      </div>
    </div>
    <div class="c-ph24 c-pv28 c-bg-white c-mb20">
      <div class="c-fw-b c-fs28">{{fromType == 1 ? '购买须知' : '使用说明'}}</div>
      <div class="c-fw-b c-pt24 c-fs24">{{fromType == 1 ? '有效期' : '代金券价值'}}</div>
      <div class="c-pt12 c-flex-row c-aligni-center">
        <div class="c-ww8 c-fc-gray">•</div>
        <div class="c-pl12 c-fc-gray" v-if="fromType == 1"><span>{{detail.validStatus == 1 ? "领券当日起" + detail.validPeriod + '天内有效' : (detail.validStatus == 2 ? "领券第二日起" + detail.validPeriod + '天内有效' : `${isPayVoucher == 1 ? "领券后" : "购买后"}${detail.startAt.split(" ")[0].replace(/-/g, ".")} - ${detail.endAt.split(" ")[0].replace(/-/g, ".")}内有效`)}}</span></div>
        <div v-else class="c-pl12 c-fc-gray">{{detail.price}}元</div>
      </div>
      <div class="c-fw-b c-pt24 c-fs24">{{fromType == 1 ? '使用时间' : '有效期'}} </div>
      <div class="c-pt12 c-flex-row c-aligni-center">
        <div class="c-ww8 c-fc-gray">•</div>
        <div class="c-pl12 c-fc-gray" v-if="fromType == 1">有效期内随时可用</div>
        <div class="c-pl12 c-fc-gray" v-else><span>{{detail.validStatus == 1 ? "领券当日起" + detail.validPeriod + '天内有效' : (detail.validStatus == 2 ? "领券第二日起" + detail.validPeriod + '天内有效' : `${isPayVoucher == 1 ? "领券后" : "购买后"}${detail.startAt.split(" ")[0].replace(/-/g, '.')} - ${detail.endAt.split(" ")[0].replace(/-/g, '.')}内有效`)}}</span></div>
      </div>
      <div class="c-pt24" v-if="detail && detail.prodInfo.length>0">
        <div class="c-fw-b c-fs24">适用范围</div>
        <div class="c-pt12 c-flex-row c-aligni-center">
          <div class="c-ww8 c-fc-gray">•</div>
          <div class="c-pl12 c-fc-gray">可用于{{detail.prodInfo[0].name.length > 8 ? `${detail.prodInfo[0].name.substr(0, 8)}...` : detail.prodInfo[0].name}}<span v-if="detail.prodInfo.length > 1">等{{detail.prodInfo.length}}个</span>商品</div>
        </div>
      </div>
      <div class="c-fw-b c-pt24 c-fs24">使用规则</div>
      <div class="c-pt12 c-flex-row c-aligni-center c-fc-gray" v-if="fromType == 1">
        <div class="c-ww12">•</div>
        <div class="c-pl12">本券仅支持商家指定的客户群体领取；</div>
      </div>
      <div class="c-pt12 c-flex-row c-fc-gray">
        <div class="c-ww12 c-p">
          <div class="c-ww12 c-textAlign-c c-hh32 c-p">•</div>
          <div class="c-ww12 c-hh32"></div>
        </div>
        <div class="c-pl12">本券不支持和店内其他优惠同时使用；不支持多张券叠加使用</div>
      </div>
      <div class="c-pt12 c-flex-row c-fc-gray">
        <div class="c-ww12 c-p">
          <div class="c-ww12 c-textAlign-c c-hh32 c-p">•</div>
          <div class="c-ww12 c-hh32"></div>
        </div>
        <div class="c-pl12">代金券不兑现、不找零、只能在消费指定课程或者服务时使用</div>
      </div>
      <div class="c-pt12 c-flex-row c-aligni-center c-fc-gray" v-if="fromType == 1 && Number(detail.salePrice) > 0">
        <div class="c-ww8">•</div>
        <div class="c-pl12">到期后未使用可申请退款</div>
      </div>
    </div>

    <div class="c-bg-white c-ph24 c-pv28">
      <div class="c-fw-b c-fs28">{{fromType == 1 ? '推荐商品' : '适用商品'}}</div>
      <template v-for="(item, index) in list">
        <div class="c-flex-row c-mt30" :class="index + 1 == list.length ? '' : 'c-pb30 c-bd-b1-f6'" v-if="item.prodType == ckFrom.edu || item.prodType == ckFrom.reservation" :key="index" @click="goDetail(item.id, item.prodType)">
          <img :src="$addXossFilter(item.avatar, require('@/assets/defult270.png'))" class="c-ww180 c-hh120 c-br12"/>
          <div class="c-flex-column c-justify-sb c-flex-1 c-ml20 c-w0">
            <div class="c-text-ellipsis1 c-fs24">{{item.name}}</div>
            <s class="c-fc-gray c-fs22 c-mt10">{{'￥' | iosPriceFilter}}{{(item.hasMulitPrice == 1 ? Number(item.minPrice) : Number(item.prodPrice)) | formatNumberOther}}<span class="c-fs16">{{item.hasMulitPrice == 1 ? '起' : ''}}</span></s>
            <div class="c-flex-row c-aligni-center c-justify-sb">
              <div class="c-flex-row c-aligni-center theme-fc">
                <div class="c-fs20 c-fw-b">券后{{'￥' | iosPriceFilter}}</div>
                <div class="c-fs30 c-fw-b"> {{(item.hasMulitPrice == 1 ? (Number(item.minPrice)-Number(detail.price) > 0 ? Number(item.minPrice)-Number(detail.price) : 0) : (Number(item.prodPrice)-Number(detail.price) > 0 ? Number(item.prodPrice)-Number(detail.price) : 0)) | formatNumberOther}}</div>
              </div>
              <div class="c-fc-white c-hh48 c-lh48 c-fs22 c-br32 c-textAlign-c c-ph30" :class="detail.status == 2 ? 'theme-bg' : 'c-bg-ccc'" v-if="fromShare == 0 && (fromType == 1 || (fromType == 2 && detail.rcdStatus == 1))">{{detail.colletNum >= 1 ? '优惠购' : detail.type == 6 && Number(detail.salePrice) > 0 && detail.colletNum == 0 ? '请先买券' : '领券购买'}}</div>
            </div>
          </div>
        </div>
      </template>
      <loading-status-tem v-if="!hasXianCourse" :dataStatus="'NO_DATA'" noDataText="暂无商品"></loading-status-tem>
    </div>

    <open-modal :openModal="showDesc" @closeModal="showDesc = false">
      <div class="c-bg-sgray c-w100 c-maxw640 br-tl28 br-tr28">
        <div class="c-w100 c-hh80 c-flex-row c-aligni-center c-bd-b1 c-bg-white br-tl28 br-tr28 c-p">
          <div class="c-textAlign-c c-fs28 c-fw-b c-fc-xblack c-w100">店铺详情</div>
          <span class="iconfont c-fs20 c-fc-sgray c-pa c-p-r24 c-p-t30" @click="showDesc = false">&#xe750;</span>
        </div>
        <div class="c-contexty-scroll c-minh360 maxh824">
          <div class="c-textAlign-c c-pt40 c-bg-white c-mb12 c-pb28">
            <img class="c-ww120 c-hh120 c-br8 imgCloseBig c-inlineblack" :src="$addXossFilter(shareLogo, '')" alt="">
            <div class="c-fs32 c-fw-b c-pt24 ">{{companyAuth.companyName}}</div>
          </div>
          <div class="c-bg-white c-w100 c-pv28 c-ph24" v-if="contactInfo && contactInfo.address">
            <div class="c-fs28 c-fw-b">店铺地址</div>
            <div class="c-pt20 c-flex-row c-aligni-center">
              <div class="c-w70 c-lh36"><span class="c-fc-gray">距离{{(contactInfo.distance/1000).toFixed(1)}}km</span><span class="c-mh10">•</span><span>{{contactInfo.address}}</span></div>
              <div class="c-textAlign-c c-pl60" v-if="contactInfo.address && contactInfo.address.length > 0" @click="clickLocation(contactInfo.lat,contactInfo.lng,contactInfo.address)">
                <div class="iconfont c-fs40 theme-fc">&#xe716;</div>
                <div class="c-fs18 c-pt8">打车</div>
              </div>
              <a class="c-fs18 c-fc-xblack c-pl40" :href="'tel:' + contactInfo.phone">
                <div class="iconfont c-fs38 theme-fc">&#xe713;</div>
                <div class="c-pt10">电话</div>
              </a>
            </div>
          </div>
          <div class="c-bg-white c-mb12 c-w100 c-pv28 c-ph24" v-if="companyProfile">
            <div class="c-fs28 c-fw-b">店铺介绍</div>
            <div class="tinymce-text c-lh36 c-fc-xblack c-ww-bw c-ww-ba c-pt24" v-html="companyProfile.intro"></div>
          </div>
        </div>
      </div>
    </open-modal>
    <bottom-buy-com @shareFriends="shareFriends" :showShareFriends="((detail.enableShare == 1 && (detail.status == 2 || detail.status == 1)) || fromShare == 1)" v-if="fromType == 1">
      <div class="c-flex-row c-w100 c-hh64 c-justify-end">
        <div class="c-w100 c-flex-row c-flex-center c-hh64 c-fs28 c-bg-ccc c-fc-white c-br36" v-if="(detail.status <= 2 && (detail.leftNum == 0 && detail.colletNum == 0)) || detail.status > 2">
          {{detail.status > 2 ? '优惠券已失效' : '优惠券已领完'}}
        </div>
        <div class="c-w100 c-hh64 c-fs28" v-else>
          <div class="theme-bg c-fc-white c-br36 c-w100 c-h c-flex-row c-flex-center" v-if="detail.colletNum == 0" @click="buyCoupon">{{isPayVoucher == 2 ? "立即购买" : "立即领取"}}</div>
          <div v-else class="c-flex-row c-justify-sb c-aligni-center c-h c-w100">
            <div class="theme-bg c-fc-white c-br36 c-w48 c-h c-flex-row c-flex-center" v-if="detail.limit > 1 && detail.colletNum < detail.limit && detail.leftNum > 0" @click="buyCoupon">继续{{isPayVoucher == 2 ? "购买" : "领取"}}</div>
            <div class="theme-bg c-fc-white c-br36 c-h c-flex-row c-flex-center" v-if="detail.colletNum <= detail.limit" :class="detail.limit == 1 ? 'c-w100' : 'c-w48'" @click="goUse">立即使用</div>
            <div class="theme-bg c-fc-white c-br36 c-w48 c-h c-flex-row c-flex-center" v-if="(detail.leftNum == 0 && detail.colletNum > 0) || (detail.limit > 1 && detail.colletNum == detail.limit)" @click="goMyVoucher">我的券</div>
          </div>
        </div>
      </div>
    </bottom-buy-com>
  </div>
</template>

<script>
import openModal from "@/components/templates/common/openModal.vue";
import BottomBuyCom from "@/components/templates/common/bottomBuyCom.vue";
import { loadBMap } from "@/utils/loadBMap.js"
import { getXgplayer } from "@/utils/xgplayerJs.js";
import { utilJs, wxUtilJs } from "@/utils/common.js";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
export default {
  name: 'ShCustomDetail',
  components: {
    openModal,
    loadingStatusTem,
    BottomBuyCom
  },
  props: [],
  beforeCreate() {},
  data() {
    return {
      ckFrom: global.ckFrom,
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      shareLogo: localStorage.getItem("shareLogo"),
      fromType: 1, //1未领取，2.立即使用 需要根据(来自普通用户的线下券)
      showDesc: false, //商家介绍
      redeemCodeId: '', //优惠券的id
      rcdId: '', //码库的id
      detail: null,
      hasXianCourse: false, //是否有先上课 制定课程的时候采用的上
      fromShare: 0, //1代表股东从股东中心进入，0是从其他进入
      list: [],
      redeemType: 24, //24 指定商品，25 商城商品通用，26全店通用（非商城）
      dataStatus: 'HAS_MORE_DATA',
      isCollectRcId: -1, //如果是码库分享进来的，-1，未领取或者不是从码库进来的，1,是已经领取了但是领取人不是自己，2是已经领取了并且领取人是自己
      couponReqiureDesc: {
        1: '仅旗下客户可领取',
        2: '无上级股东的新老用户可领取和旗下客户可领取',
        3: '无上级股东的新用户和旗下客户可领取',
        4: '无上级股东的老用户和旗下客户可领取',
      },
      isPayVoucher: '', //1免费, 2收费
      ckfrom: global.ckFrom,
      isVideoPlay: false,
      contactInfo: {}, //店铺详情
      coupunStatus: {
        1: "未使用",
        2: "已使用",
        3: "未开始",
        4: "已过期",
        5: "已作废",
      },
      companyProfile: null, //店铺介绍
      lat: '', //纬度
      lng: '', //经度
      fromModule: '', //任何用户可领标识
      source: '', //来源 21：领券中心  22：宝贝厨窗
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {},
  computed: {},
  watch: {},
  methods: {
    goDetail(id, prodType) {
      let url = prodType == global.ckFrom.edu || prodType == global.ckFrom.eduJiGou ? "/edu/eduDetail" : `/activity/activityDetail?ActivityNo=${id}&from=reservation`;
      if (this.detail.colletNum >= 1 || this.fromShare == 1 || this.detail.status > 2 || this.detail.leftNum == 0) {
        this.$routerGo(this, "push", {
          path: url,
          query: { id: id }
        })
      } else {
        // type为6是抵用券 && 收费
        if (this.detail.type == 6 && Number(this.detail.salePrice) > 0) {
          let shareholderId = localStorage.getItem("shareholderId") ? localStorage.getItem("shareholderId") : '';
          utilJs.getMethod(`${global.apiurl}coupon/buyJWCoupon?redeemCodeId=${this.redeemCodeId}&rcdId=${this.rcdId}&shareholderId=${shareholderId}&fromModule=${this.fromModule}`, res => {
            if (res.statusCode == 500) {
              this.$showCjToast({
                text: `${res.msg}`,
                type: "warn"
              });
            } else {
              let goPathQuery = {
                cId: -1,
                extId: this.redeemCodeId ? this.redeemCodeId : this.detail.redeemCodeId,
                ckFrom: this.ckfrom.shareholderPayVoucher,
                payMoney: this.detail.salePrice,
                rcdId: !!this.rcdId ? this.rcdId : '',
                number: 1,
                shareholderId: localStorage.getItem("shareholderId") ? localStorage.getItem("shareholderId") : '',
                recommendId: id,
                recommendType: prodType,
                fromModule: this.fromModule,
                source: this.source,
              }
              this.$routerGo(this, "push", {
                path: "/homePage/course/coursePay",
                query: goPathQuery
              });
            }
          })
        } else {
          this.getCoupon(() => {
            this.$routerGo(this, "push", {
              path: url,
              query: { id: id }
            })
          });
        }
      }
    },
    //领券
    getCoupon() {
      if (this.detail.status <= 2 && this.detail.colletNum < this.detail.limit && this.detail.leftNum > 0 && this.isCollectRcId == -1) {
        let data = {};
        data.fromModule = this.fromModule;
        data.source = this.source;
        if (this.redeemCodeId) {
          data.redeemCodeId = this.redeemCodeId;
        }
        if (this.rcdId) {
          data.rcdId = this.rcdId;
        }
        if (localStorage.getItem("shareholderId") && this.fromShare == 0 && (localStorage.getItem("shareholderId") != localStorage.getItem("userId"))) {
          data.shareholderId = localStorage.getItem("shareholderId");
        }
        utilJs.postMethod(
          global.apiurl + "coupon/collectJWCoupon",
          data,
          (res) => {
            this.$set(this.detail, "colletNum", this.detail.colletNum + 1);
            this.$set(this.detail, "endAt", res.endAt);
            this.$set(this.detail, "leftNum", this.detail.leftNum - 1);
            this.detail.eRcdId = res.eRcdId;
            this.$set(this.detail, "eRcdId", res.eRcdId);
            if (this.rcdId) {
              this.detail.userId = res.userId;
              this.$set(this.detail, "userId", res.userId);
              this.isCollectRcId = 2;
            }
            this.$showCjToast({
              text: '领取成功',
              type: 'success'
            });
            window.scrollTo(0, 0);
            this.fromType = 2;
            this.getDetail();
          },
          (fres) => {
            this.getDetail();
          }
        );
      } else if (this.detail.status > 2 || (this.detail.status <= 2 && (this.detail.colletNum >= this.detail.limit || (this.detail.colletNum >= 1 && this.detail.leftNum == 0) || this.isCollectRcId == 2))) { //已失效, 立即使用的
        if (this.detail.status > 2) {
          //下滑滚动
          window.scrollTo(0, 500);
        } else {
          this.fromType = 2;
        }
      }
    },
    getShowDesc() {
      this.showDesc = true;
      if (JSON.stringify(this.companyProfile) == "null") {
        this.getBrief()
      }
    },
    getBrief() {
      utilJs.getMethod(`${global.apiurl}company/brief`, res => {
        this.companyProfile = res;
      })
    },
    goUse() {
      this.fromType = 2;
      window.scrollTo(0, 0);
    },
    goMyVoucher() {
      this.$routerGo(this, "push", {
        path: "/member/myValueVoucher/myValueVoucher",
        query: {couponType: 4}
      });
    },
    shareFriends() {
      let goPathQuery = {
        id: this.redeemCodeId,
        rcdId: this.rcdId,
      }
      this.$routerGo(this, "push", {
        path: "/homePage/shareholder/voucherShare",
        query: goPathQuery
      });
    },
    buyCoupon() {
      if (this.isPayVoucher == 2) {
        this.buyNow();
      } else {
        this.getCoupon();
      }
    },
    buyNow() {
      if ((this.detail.status <= 2 && (this.detail.leftNum == 0 && this.detail.colletNum == 0)) || this.detail.status > 2) {
        return;
      }
      let shareholderId = localStorage.getItem("shareholderId") ? localStorage.getItem("shareholderId") : '';
      utilJs.getMethod(`${global.apiurl}coupon/buyJWCoupon?redeemCodeId=${this.redeemCodeId}&rcdId=${this.rcdId}&shareholderId=${shareholderId}&fromModule=${this.fromModule}`, res => {
        if (res.statusCode == 500) {
          this.$showCjToast({
            text: `${res.msg}`,
            type: "warn"
          });
        } else {
          let goPathQuery = {
            cId: -1,
            extId: this.redeemCodeId ? this.redeemCodeId : this.detail.redeemCodeId,
            ckFrom: this.ckfrom.shareholderPayVoucher,
            payMoney: this.detail.salePrice,
            rcdId: !!this.rcdId ? this.rcdId : '',
            number: 1,
            shareholderId: shareholderId,
            fromModule: this.fromModule,
            source: this.source,
            goodsRoomId: this.$route.query.goodsRoomId
          }
          this.$routerGo(this, "push", {
            path: "/homePage/course/coursePay",
            query: goPathQuery
          });
        }
      })
    },
    clickLocation(lat, lng, addr) {
      wxUtilJs.openLocation({
        latitude: parseFloat(lat), // 纬度，浮点数，范围为90 ~ -90
        longitude: parseFloat(lng), // 经度，浮点数，范围为180 ~ -180。
        name: "", // 位置名
        address: addr, // 地址详情说明
        scale: 28, // 地图缩放级别,整形值,范围从1~28。默认为最大
        infoUrl: "" // 在查看位置界面底部显示的超链接,可点击跳转
      });
    },
    initTcPlayer(mp4Url, videoM3u8) {
      this.isVideoPlay = true
      this.$nextTick(() => {
        if (!document.getElementById('myVideo') || (!mp4Url && !videoM3u8)) {
          return;
        }
        document.getElementById('myVideo').innerHTML = '';
        //西瓜视频
        mp4Url = mp4Url ? mp4Url : '';
        videoM3u8 = videoM3u8 ? videoM3u8 : '';
        // let isMobile = !!window.navigator.userAgent.match(/AppleWebKit.*Mobile.*/); //是否为移动终端
        let videoObj = {
          videoMp4: mp4Url,
          videoM3U8: videoM3u8,
          autoplay: true,
        }
        getXgplayer('myVideo', videoObj);
      })
    },
    getDetail() {
      utilJs.getMethod(global.apiurl + 'coupon/getJWRedeemCodePage?id=' + this.redeemCodeId + "&rcdId=" + this.rcdId, (res) => {
        if (this.rcdId != '') {
          if (res.userId != -1 && res.userId == localStorage.getItem("userId")) {
            this.isCollectRcId = 2;
          } else if (res.userId != -1 && res.userId != localStorage.getItem("userId")) {
            this.isCollectRcId = 1;
            res.status = 5; //已作废
          }
        }
        this.detail = res;
        this.detail.rcdQrcode = "data:image/svg+xml;base64," + window.btoa(decodeURIComponent(encodeURIComponent(res.rcdQrcode)));
        if (res.type == 6 && Number(res.salePrice) > 0) {
          this.isPayVoucher = 2
        } else {
          this.isPayVoucher = 1
        }
        this.detail.isShareholder = localStorage.getItem("shareholderId") && localStorage.getItem("shareholderId") == localStorage.getItem("userId") ? true : false;
        this.redeemType = res.redeemType;
        this.list = res.prodInfo;
        if (res.prodInfo && res.prodInfo.length > 0) {
          for (let i = 0; i < res.prodInfo.length; i++) {
            if (this.hasXianCourse) {
              break;
            }
            if (res.prodInfo[i].prodType == global.ckFrom.eduJiGou) {
              continue;
            }
            if (res.prodInfo[i].prodType == global.ckFrom.edu || res.prodInfo[i].prodType == global.ckFrom.reservation) {
              this.hasXianCourse = true;
              continue;
            }
          }
        }
        let dInfo = this.detail.intrDetail;
        if (dInfo && dInfo.substring(0, 4) == 'http' && dInfo.length > 5) {
          this.$set(this.detail, "intrDetail", "");
          utilJs.getPageHtml(dInfo, (sres) => {
            this.$set(this.detail, "intrDetail", sres);
          }, () => {
            this.$set(this.detail, "intrDetail", "");
          });
        }
        this.wechatShare();
      });
    },
    // 百度地图定位
    getLocation() {
      /* eslint-disable */
      let that = this;
      let geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
          that.lng = r.point.lng;
          that.lat = r.point.lat;
          that.getContact();
        }
      });
    },
    getContact() {
      utilJs.getMethod(`${global.apiurl}company/contactUs?lat=${this.lat}&lng=${this.lng}`, res => {
        this.contactInfo = res;
      });
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/shareholder/shCouponDetail?refereeId=" +
        localStorage.getItem("userId");
      if (this.redeemCodeId && this.redeemCodeId != '') {
        shareUrl += '&id=' + this.redeemCodeId;
      }
      if (this.rcdId && this.rcdId != '') {
        shareUrl += '&rcdId=' + this.rcdId
      }
      if (localStorage.getItem("shareholderId")) {
        shareUrl += "&shareholderId=" + localStorage.getItem("shareholderId");
      }
      let title = "送你一张优惠券";
      let shareDesc = "";
      if (this.detail.enableShare == -1) {
        utilJs.wechatConfig(shareUrl, title, "", shareDesc, function () { }, true, { hideAllNonBaseMenuItem: 1 });
      } else {
        utilJs.wechatConfig(shareUrl, title, "", shareDesc, function () { }, true, { hideAllNonBaseMenuItem: 0 });
      }
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/shareholder/shCouponDetail?refereeId=" +
        localStorage.getItem("userId");
      if (this.redeemCodeId && this.redeemCodeId != '') {
        shareUrl += '&id=' + this.redeemCodeId;
      }
      if (this.rcdId && this.rcdId != '') {
        shareUrl += '&rcdId=' + this.rcdId;
      }
      if (localStorage.getItem("shareholderId")) {
        shareUrl += "&shareholderId=" + localStorage.getItem("shareholderId");
      }
      let title = "送你一张优惠券";
      let shareDesc = "";
      if (this.detail.enableShare == -1) {
        utilJs.appShareTrue(title, "", shareUrl, shareDesc, function () { }, true, { hideAllNonBaseMenuItem: 1 });
      } else {
        utilJs.appShareTrue(title, "", shareUrl, shareDesc, function () { }, true, { hideAllNonBaseMenuItem: 0 });
      }
    },
    initData() {
      this.fromType = this.$route.query.fromType || 1;
      this.redeemCodeId = this.$route.query.id || '';
      this.rcdId = this.$route.query.rcdId || '';
      this.fromModule = this.$route.query.fromModule || '';
      this.source = this.$route.query.source || '';
      this.showDesc = false;
      this.detail = null;
      this.companyProfile = null;
      this.hasXianCourse = false;
      this.isCollectRcId = -1;
      this.contactInfo = {};
      this.fromShare = 0;
      this.redeemType = 24;
      this.list = [];
      this.isPayVoucher = "";
      this.dataStatus = 'HAS_MORE_DATA';
      let fs = this.$route.query.fromShare || 0;
      if (fs == 1 && localStorage.getItem("shareholderId") && localStorage.getItem("shareholderId") == localStorage.getItem("userId")) {
        this.fromShare = 1;
      }
      this.getContact();
      this.$nextTick(function () {
        loadBMap().then(BMap => {
          this.getLocation();
        })
        window.scrollTo(0, 0);
      })
      this.getDetail();
    },
  },
  activated() {
    setDocumentTitle("优惠券详情");// eslint-disable-line
    this.initData();
  },
  deactivated() {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.maxw240 {
  max-width: 6rem;
}
.bg{
  background: linear-gradient(180deg,#ef2d38, #e91902 24%, #ec1530 97%);
  background: var(#ec1530);
}
.bgImg {
  background: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/newAreaAgent/topBg.png') no-repeat center;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pd{
  width: 100%;
  max-width: 16rem;
}
.button-img {
  background: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/newAreaAgent/btnImg.png') no-repeat center;
  background-size: 100% 100%;
  width: 9.5rem;
  height: 2rem;
  text-align: center;
  font-weight: bold;
  line-height: 1.8rem;
  font-size: 0.7rem;
}
.bg1 {
  background: linear-gradient(180deg,#ff5325, #e22405) no-repeat;
  background: var(#e22405);
  background-size: 100% 5.6rem;
}
.tBg {
  background: rgba(255, 255, 255, 0.3);
  width: 1.2rem;
  height: 1.2rem;
  display: inline-block;
  line-height: 1.2rem;
  margin-left: 0.15rem;
  margin-right: 0.15rem;
}
.wechatShow {
  width: 12.8rem;
  height: 12rem;
  background-color: #fff;
  border-radius: 0.3rem;
  margin: auto;
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
.modal {
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1002;
  width: 100%;
  max-width: 16rem;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.mt-60 {
  margin-top: -1.5rem;
}
.ticketDetail {
  background: url("../../../../public/i/wap/coupon/ticketDetail.png") no-repeat 100%;
  background-size: 100% 100%;
}
.ticketInfo {
  background: url("../../../../public/i/wap/coupon/ticketInfo.png") no-repeat 100%;
  background-size: 100% 100%;
}
.circle {
  margin-top: -25%;
  margin-left: -25%;
}
.c-fc-B75F36 {
  color: #B75F36;
}
.c-text-shadow {
  text-shadow: 0 4px 10px rgba(207,0,10,0.4);
}
.coupon-title {
  position: absolute;
  top: -1.26rem;
  left: 50%;
  transform: translateX(-50%);
  background: url(https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/newAreaAgent/titleBg.png) no-repeat center;
  width: 8.9rem;
  height: 1.7rem;
  line-height: 1.9rem;
  background-size: 100% 100%;
  color: #802F01;
  font-size: 0.75rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
}
.envelop-bg {
  background: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/newAreaAgent/tophb.png') no-repeat center;
  width: 13.5rem;
  height: 10.4rem;
  background-size: 100% 100%;
}
.good-style {
    margin-top: 1.65rem;
    padding-top: 0.75rem;
}
.c-bd-one {
  border-top: 1px solid #EED2B6;
}
.c-tsY-5 {
  margin-left: .4rem;
}
.xgplayer {
  width: 100%!important;
  height: 100%!important;
}
.by-button {
  background-image: linear-gradient(90deg, #FF300C 0%, rgba(255,48,12,0.70) 100%);
}
.fc-red {
  color: #FF320E
}
.bg-lyellow {
  background-image: linear-gradient(224deg, #FEDB96 0%, #FEE5B4 100%);
}
.fc-lorange {
  color: #FF7225;
}
.hh514 {height: 12.85rem;}
.br-tl28{border-top-left-radius: 0.7rem}
.br-tr28{border-top-right-radius: 0.7rem}
svg {
  width: 5rem;
  height: 5rem;
}
.maxh824{max-height: 20.6rem;}
</style>
